<%- include('../../common/header.html',{css:'common'}) %>
<%- include('../../common/script-validation.html') %>
<%- include('../../common/script-ajax-file-upload.html') %>
<%- include('../../common/script-jcrop.html') %>
<%- include('../../common/layer.html') %>
<title>会员等级-后台管理系统</title>
<style>
    .upload-icon {
        display: block;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        text-align: center;
    }
</style>
</head>
<body class="sub-body">
<%- include('../../common/top-nav.html') %>
<%- include('../../common/page-title.html',{navs:[
{label:'首页',url:'../../main.html'},
{label:'系统管理',url:'javascript:void(0)'},
{label:'会员等级',url:'javascript:void(0)'},
]}) %>
<div class="content">
    <div class="panel panel-default">
        <div class="panel-body">
            <br/>
            <form class="form-horizontal" id="user-form" novalidate="novalidate">
                <div class="form-group" style="font-weight: 700;">
                    <label class="col-sm-2 control-label">会员名称</label>
                    <div class="col-sm-1" style="position: relative;line-height: 34px;">回答总次数</div>
                    <div class="col-sm-1" style="position: relative;line-height: 34px;">精选回答次数</div>
                    <div class="col-sm-1" style="position: relative;line-height: 34px;">植物卡总数</div>
                    <div class="col-sm-1" style="position: relative;line-height: 34px;">植物最高等级</div>
                    <div class="col-sm-1 " style="line-height: 34px;">会员徽章</div>
                    <div class="col-sm-3 " style="line-height: 34px;">成长值说明</div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        var list = [];
        $.get('/user/getSaleLevel', function (data) {
            list = data.list;
            data.list.map(function (item, index) {
                $('form').append('<div class="form-group"> \
                        <label class="col-sm-2 control-label" style="font-weight: 400;">' + item.label + '</label> \
                        <div class="col-sm-1"><input type="number" data-id="' + item.id + '" disabled name="factor1' + index + '" class="form-control" placeholder="请输入" value="' +
                    item.factor1 + '" data-rule-required="true" ></div> \
                     <div class="col-sm-1"><input type="number" data-id="' + item.id + '" disabled name="factor2' + index + '" class="form-control" placeholder="请输入" value="' +
                    item.factor2 + '" data-rule-required="true" ></div> \
                     <div class="col-sm-1"><input type="number" data-id="' + item.id + '" disabled name="factor3' + index + '" class="form-control" placeholder="请输入" value="' +
                    item.factor3 + '" data-rule-required="true" ></div> \
                     <div class="col-sm-1"><input type="number" data-id="' + item.id + '" disabled name="factor4' + index + '" class="form-control" placeholder="请输入" value="' +
                    item.factor4 + '" data-rule-required="true" ></div> \
                        <div class="col-sm-1 " style="line-height: 34px;">\
                        <input type="hidden" name="url" value="' + (item.url || '') + '">\
                        <a class="upload-icon" href="javascript:void(0); " > \
                    ' + (!!item.url ? '<img src="' + item.url + '" style="height: 100%;border-radius: 2px;"/>' : '<i class=" fa-cloud-upload fa" style="line-height: 35px;color: #ddd;"></i>') + '</a> \
                        </div>\
                        <div class="col-sm-3 " style="font-size:14px;line-height: 34px;">' + item.remark + '</div> \
                         <div class="clearfix"></div>\
                        </div>')
            });
            $('form').append('<div class="form-group"> \
                    <div class="col-sm-offset-2 col-sm-10"> \
                    <button id="edit" data-loading-text="提交处理中..." class="btn btn-primary" >编辑</button>\
                    <button id="submit" style="display: none" type="submit" data-loading-text="提交处理中..." class="btn btn-primary" \
            autocomplete="off">保存</button><button id="cancel"  style="display: none;margin-left: 5px;" data-loading-text="提交处理中..." class="btn btn-default" \
            autocomplete="off">取消</button> \
                    </div> \
                    </div>');


            onClick($('a.upload-icon'), function () {
                if ($('#edit:visible').length)return;
                var self = this;
                uploadFn('会员徽标', {
                    w: 300,
                    num: 12,
                    labelNum: '12 upload-custom-label',
                    h: 200,
                    noCrop: false,
                    preview: 'left-top-preview',
                }, function (data) {
                    closeLayer(data.layerIndex);
                    if (!$(self).find('img').length) {
                        if ($(self).find('.fa-cloud-upload').length) {
                            $(self).find('.fa-cloud-upload').replaceWith('<img src="' + data.path + '" style="height: 100%;" />')
                        } else {
                            $(self).append('<img src="' + data.path + '" style="height: 100%;border-radius:2px;" />')
                        }
                    } else {
                        $(self).find('img').attr('src', data.path)
                    }
                    $(self).siblings('input').val(data.path);
                });
            })

            var $submit = $('[type=submit]');
            $('#edit').click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                $('input[type=number]').attr('disabled', false);
                $(this).hide();
                $(this).siblings('button').show();
            });
            $('#cancel').click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                $('input[type=number]').attr('disabled', true);
                $(this).siblings('#submit').hide();
                $(this).hide();
                $(this).siblings('#edit').show();
            });
            $("#user-form").submit(function (form_) {
                var form = {
                    id: [], url: [],
                    percent: [],
                    factor1: [],
                    factor2: [],
                    factor3: [],
                    factor4: [],
                };
                form_ = form_.target;
                $submit.button('loading');
                list.map(function (item, index) {
                    form['id'].push($(form_).find('[name=factor1' + index + ']').data('id'));
                    form['url'].push($(form_).find('[name=factor1' + index + ']').closest('.form-group').find('[name=url]').val());
                    form['factor1'].push($(form_).find('[name=factor1' + index + ']').val());
                    form['factor2'].push($(form_).find('[name=factor2' + index + ']').val());
                    form['factor3'].push($(form_).find('[name=factor3' + index + ']').val());
                    form['factor4'].push($(form_).find('[name=factor4' + index + ']').val());
                });

                $.post('/user/saveSaleLevel', {
                    ids: form['id'].join(','),
                    url: form['url'].join(',,'),
                    factor4: form['factor4'].join(','),
                    factor3: form['factor3'].join(','),
                    factor2: form['factor2'].join(','),
                    factor1: form['factor1'].join(','),
                    percents: form['percent'].join(',')
                }, function (xhr) {
                    if (xhr.code == 0) {
                        alert('保存成功!');
                        $('input[type=number]').attr('disabled', true);
                        $('#submit').hide();
                        $('#edit').show();
                        $('#cancel').hide();
                    } else {
                        alert(xhr.error);
                    }
                    $submit.button('reset');
                })
                return false;
            });
        });


    });
</script>

</html>